<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../script/jquery-1.10.min.js"></script>

    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="../script/bootstrap-3.3.7.min.js"></script>
    <title>Title</title>
</head>
<body>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array">mdn 介绍array</a>
<div>
    <button class="btn btn-default" onclick="aset()">Array</button>
</div>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map">mdn 介绍Map</a>
<div>
    <button class="btn btn-default" onclick="mapset()">Map 复制合并遍历与数组互相转换</button>
</div>

<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set">mdn 介绍Set</a>
<div>
    <button class="btn btn-default" onclick="Setset()">Set</button>
</div>

<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create">mdn
    介绍object</a>
<div>
    <button class="btn btn-default" onclick="Objectset()">Object</button>
</div>

<a href="https://blog.csdn.net/qq_30100043/article/details/53635612">map,object,json互转</a>
<script>
    function aset() {
        var fruits = ['Apple', 'Banana'];
        console.log(fruits)

        var arr1 = new Array("1", 1, "2") // 元素类型可以不统一
        console.log(arr1)
        arr1.length = 1; // 可以截取长度，甚至清空
        console.log(arr1);

        //添加删除
        //尾部添加
        arr1.push(1)
        //头部添加
        arr1.unshift(1)
        console.log(arr1);
        //尾部删除
        arr1.pop()
        //头部删除
        arr1.shift();
        console.log(arr1);
        //遍历
        fruits.forEach(function (item, index, array) {
            console.log(item, index);
        });

        //数组相加
        var a = [1, 2, 3];
        var b = new Array(4, 5, 6);
        var c =a.concat(b)
        console.log("两个数组合并后",c);

        b.push.apply(b,a); // a 加到b后面  [4, 5, 6, 1, 2, 3]
//        b.unshift.apply(b,a) // a 加到b前面  [1, 2, 3，4, 5, 6]
        console.log("两个数组合并后",b);
// 数组转字符串，查找数组中的值 ,等方法见介绍

        //按照数字排序
        arr3=[2,5,22,11,2,53,67,3,7]
        console.log("默认按照字符串排序",arr3.sort());
        arr3.sort(function (n1,n2) {
            return n1-n2; // 只要返回 正数，负数，0   就可以排序
//           switch (true){
//               case (n1>n2):
//                   return 1
//               case (n1<n2):
//                   return -1
//               case (n1=n2):
//                   return 0
//           }
        });
        console.log("按照数值排序",arr3)
        // 浅复制
        var shallowCopy = fruits.slice();
        console.log(shallowCopy, fruits)
        //插入，指定位置删除
        arr2 = [1,2,3,4,5,6];
        arr2.splice(0,2);//从位置0开始删除2个
        console.log(arr2); // [3,4,5,6]
        arr2.splice(0,0,1,2,3); //从0开始插入 不删除
        console.log("插入删除后",arr2)


        var array1 = [1, 4, 9, 16];
// pass a function to map
        map1 = array1.map(x => x * 2); //todo 语法提示错误忽略 创建数组 类似  python map()
        console.log(map1);
// expected output: Array [2, 8, 18, 32]
    }


    function mapset() {
        var myMap = new Map();

        var keyObj = {},
            keyFunc = function () {
            },
            keyString = "a string";

// 添加键
        myMap.set(keyString, "和键'a string'关联的值");
        myMap.set(keyObj, "和键keyObj关联的值");
        myMap.set(keyFunc, "和键keyFunc关联的值");

        console.log(myMap.size) // 3

// 读取值
        console.log(
            myMap.get(keyString),    // "和键'a string'关联的值"
            myMap.get(keyObj),       // "和键keyObj关联的值"
            myMap.get(keyFunc),      // "和键keyFunc关联的值"

            myMap.get("a string"),   // "和键'a string'关联的值"
            // 因为keyString === 'a string'
            myMap.get({}),           // undefined, 因为keyObj !== {}
            myMap.get(function () {
            }) // undefined, 因为keyFunc !== function () {}
        );
        // todo 遍历MAP
        var myMap = new Map();
        myMap.set(0, "zero");
        myMap.set(1, "one");
        for (var [key, value] of myMap) {
            console.log(key + " = " + value);
        }
// 将会显示两个log。一个是"0 = zero"另一个是"1 = one"

        for (var key of myMap.keys()) {
            console.log(key);
        }
// 将会显示两个log。 一个是 "0" 另一个是 "1"

        for (var value of myMap.values()) {
            console.log(value);
        }
// 将会显示两个log。 一个是 "zero" 另一个是 "one"

        for (var [key, value] of myMap.entries()) {
            console.log(key + " = " + value);
        }
// 将会显示两个log。 一个是 "0 = zero" 另一个是 "1 = one"

    }

    function Setset() {
        const set1 = new Set([1, 2, 3, 4, 5]);

        console.log(set1.has(1));
// expected output: true

        console.log(set1.has(5));
// expected output: true

        console.log(set1.has(6));
// expected output: false
    }

    function Objectset() {
        const person = {
            isHuman: false,
            printIntroduction: function () {
                console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
            }
        };

        const me = Object.create(person);
        me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
        me.isHuman = true; // inherited properties can be overwritten

        me.printIntroduction();

        //方式二
        var cf = function () {
            console.log("this is fun cf")
        };
        var sobject = {"a": 1, "b": 2, "c": cf};
        console.log(sobject);
        console.log(sobject.a);
        sobject.c()
// expected output: "My name is Matthew. Am I human? true"

    }
</script>
</body>
</html>